<template>
	<el-dialog :title="!dataForm.id ?'新增':'修改'" :visible.sync="dialogVisible" :before-close="handleClose" width="640px">
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="150px" class="demo-ruleForm">
			<el-form-item label="登录账号" prop="username">
				<el-input v-model.trim="dataForm.username" placeholder="账号由字母或数字组成" @input="(v)=>(dataForm.username = v.replace(/[^\a-\z\A-\Z0-9]/g, ''))" :disabled="dataForm.id?true:false"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="dataForm.password" placeholder="请输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="r_password">
				<el-input type="password" v-model="dataForm.r_password" placeholder="请再次输入密码"></el-input>
			</el-form-item>
			<div class="hr_xian"></div>
			<el-form-item label="营业执照" prop="thumb">
				<el-upload ref="upload" action :file-list="fileList" :auto-upload="false" accept="image/*"
					:on-remove="deleteFilex" :before-remove="beforeRemove" :on-preview="preview"
					:on-change="(file,fileList)=>{imgChangex(file,fileList)}" :limit="1">
					<el-button size="mini" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">上传图片最大不能超过10M</div>
				</el-upload>

			</el-form-item>
			<el-form-item label="企业名称" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入企业名称"></el-input>
			</el-form-item>
			<el-form-item label="统一社会信用代码" prop="card">
				<el-input v-model="dataForm.card" placeholder="请输入统一社会信用代码"></el-input>
			</el-form-item>
			<el-form-item label="所在地区" prop="provinceId">
				<el-cascader :options="regionData" v-model="addressArr" @change="handleChange" placeholder="请选择省市区"
					style="width: 100%;"></el-cascader>
			</el-form-item>
			<el-form-item label="企业实际住所" prop="address">
				<el-input v-model="dataForm.address" placeholder="请输入企业实际住所"></el-input>
			</el-form-item>
			<el-form-item label="企业介绍" prop="content">
				<el-input type="textarea" v-model="dataForm.content"></el-input>
			</el-form-item>
			<el-form-item label="联系人" prop="contact">
				<el-input v-model="dataForm.contact" placeholder="请输入联系人"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="mobile">
				<el-input v-model="dataForm.mobile" placeholder="请输入联系电话"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio v-model="dataForm.status" label="1">正常</el-radio>
				<el-radio v-model="dataForm.status" label="0">禁用</el-radio>
			</el-form-item>
			<div class="hr_xian"></div>
			<el-form-item label="备注信息" prop="remarks">
				<el-input type="textarea" v-model="dataForm.remarks"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	import {
		provinceAndCityData,
		regionData,
		rovinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from "element-china-area-data"
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.dataForm.r_password !== '') {
						this.$refs.dataForm.validateField('r_password');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.dataForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				regionData,
				TextToCode,
				dialogVisible: false,
				addressArr: [],
				fileList: [],
				dataForm: {
					id: '',
					username: '',
					password: '',
					r_password: '',
					thumb: '',
					name: '',
					card: '',
					address: '',
					content: '',
					contact: '',
					mobile: '',
					status: '1',
					remarks: '',
					provinceId: '',
					cityId: '',
					areaId: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					r_password: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					card: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入企业实际住所',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入企业介绍',
						trigger: 'blur'
					}],
					contact: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					thumb: [{
						required: true,
						message: '请上传营业执照',
						trigger: 'blur'
					}],
					provinceId: [{
						required: true,
						message: '请选择所在地区',
						trigger: 'change'
					}],
				}
			}
		},
		computed:{
			
		},
		created() {
			console.log(regionData,this.regionData)
		},
		methods: {
			preview(file) {
				window.open(file.url)
			},
			init() {
				this.dialogVisible = true
				this.fileList = []
				this.addressArr = []
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					if (this.dataForm.id) {
						this.getInfo()
					}
				})
			},
			getInfo() {
				this.$nextTick(() => {
					this.$loading()
				})

				this.$http.post(`/api/corp/edit`, {
					id: this.dataForm.id
				}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
					this.dataForm.status = String(res.result.status)
					this.dataForm.r_password = res.result.password
					if (res.result.provinceId && res.result.cityId && res.result.areaId) {
						this.addressArr = [String(res.result.provinceId), String(res.result.cityId),
							String(res
								.result
								.areaId)
						]
					} else {
						this.addressArr = []
					}
					if (this.dataForm.thumb) {
						this.fileList = [{
							name: '营业执照.jpg',
							url: process.env.VUE_APP_BASE_API + this.dataForm.thumb
						}]
					}
				})
			},
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						if (this.dataForm.id) {
							this.dataForm.is_post = 1
						} else {
							this.dataForm.is_post = null
						}
						this.$http.post(!this.dataForm.id ? '/api/corp/add' : '/api/corp/edit', this
							.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 2000,
								onClose: () => {
									this.dialogVisible = false
									this.resetForm()
									this.$emit('refreshDataList')
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			resetForm() {
				this.fileList = []
				this.addressArr = []
				this.$refs.dataForm.resetFields();
			},
			handleClose() {
				this.dialogVisible = false
			},
			// 地址回显
			handleChange(value) {
				console.log(value)
				if (value) {
					this.dataForm.provinceId = value[0]
					this.dataForm.cityId = value[1]
					this.dataForm.areaId = value[2]
				}
			},
			imgChangex(file, fileList) {
				console.log(fileList)
				if ((file.raw.size / 1024 / 1024) > 10) {
					this.$message.error('上传文件大小不能超过 10MB!');
					fileList.pop()
					return
				} else {
					this.fileList = fileList
				}
				let form = new FormData();
				fileList.forEach(file => {
					form.append("file", file.raw);
				})
				this.$loading()
				this.$http.post("/api/publics/uppic", form, {
					header: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					this.$closeLoading()
					this.$message.success(res.msg)
					// console.log(res)
					this.dataForm.thumb = res.result.img_url
					this.dataForm.name = res.result.ocr.name
					this.dataForm.card = res.result.ocr.creditcode
					this.dataForm.address = res.result.ocr.address
				}).catch(res => {
					fileList.pop()
				})
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`)
			},
			deleteFilex(file, fileList) {
				this.fileList = fileList
			},
		}
	}
</script>
<style scoped lang="scss">
	.demo-ruleForm {
		padding-right: 50px;
	}
</style>